<template>
	<view class="home_out">
		<!-- 搜索栏 -->
		<view class="home_search">
			<uni-easyinput prefixIcon="search" v-model="form" placeholder="请输入内容" @iconClick="iconClick" />
		</view>
		<!-- 轮播图 -->
		<view class="lunbo_home">
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
					<image class="image"  :src="item.url" mode="aspectFill" />
				</view>
			</swiper-item>
			</swiper>
		</view>
		<!-- 成品展示 -->
		<view>
			<text style="display: flex;justify-content: center;border: 1px solid green;">成品展示</text>
			<view class="home_finished">
				<view class="home_finished_pic" v-for="(item,index) in items" :key="index">
						<image style="width: 100%;height: 200rpx;" src="/static/uni.png" />
				</view>
			</view>
		</view>
		<!-- 热门模特 -->
		<view>
			<text style="display: flex;justify-content: center;border: 1px solid orangered;">热门模特</text>
			<view class="home_model">
				<view class="home_model_pic" v-for="(item,index) in items01" :key="index">
						<image style="width: 100%;height: 200rpx;" src="/static/uni.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
// 轮播图
import uniSwiperDot from '@dcloudio/uni-app';
// 轮播图的数据
const indicatorDots = ref(true);
const autoplay = ref(true);
const interval = ref(2000); // 切换的间隔时间
const duration = ref(500); // 滑动动画时长
// 搜索栏数据
const form = ref({
	sousuo: ''
});
const info = ref([
  {
    colorClass: 'uni-bg-red',
    url: '/static/c1.png',
    content: '内容 A'
  },
  {
    colorClass: 'uni-bg-green',
    url: '/static/c2.png',
    content: '内容 B'
  },
  {
    colorClass: 'uni-bg-blue',
    url: '/static/c3.png',
    content: '内容 C'
  }
]);
// 搜索框
const search = (e) => {
	console.log(e.value);
}
// 成品展示
     const items = ref([
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
		{ id: 4, name: 'Item 4' },
		{ id: 5, name: 'Item 5' },
		{ id: 6, name: 'Item 6' }
      ])
// 热门模特
     const items01 = ref([
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ])
</script>

<style>
	/* 主体 */
.home_out{
	margin-top: 8%;
}
/* 搜索框 */
.home_search{
	width: 95%;
	margin-left: 2.5%;
	margin-top: 8%;
}
/* 轮播图 */
.lunbo_home{
	width: 100%;
	height: 400rpx;
}
.swiper-box{
	width: 100%;
	height: 100%;
}
.swiper-item{
	width: 100%;
	height: 100%;
}
/* 轮播图中图片大小 */
.image{
	width: 100%;
	height: 100%;
}
/* 成品展示 */
.home_finished{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	/* 是否允许换行 */
	flex-wrap: wrap;
	width: 100%;
	height: 450rpx;
	border: 1px solid red;
}
.home_finished_pic{
	width: 32%;
	height: 200rpx;
	border: 1px solid purple;
}
/* 热门模特 */
.home_model{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	/* 是否允许换行 */
	flex-wrap: wrap;
	width: 100%;
	height: 400rpx;
	border: 1px solid red;
}
.home_model_pic{
	width: 32%;
	height: 400rpx;
	border: 1px solid purple;
}
</style>
